<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>官网注册</title> 
</head>
<link rel="stylesheet" href="WebContent/statics/css/bootstrap.css"/>
<script type="text/javascript" src="WebContent/statics/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="WebContent/statics/js/bootstrap.js"></script>  
<style type="text/css">
table{
    border:#39F 1px solid;
    width:600px;
    border-collapse:collapse;   
}

table td,table th{
    border:#39F 1px solid;
    padding:10px;   
}

table td{
    background-color:#FF9;
}
table th{
    background-color:#FC6;
}
#repswspan{
    margin-left:120px;  
}
.errorinfo{
    color:#F00;
    display:none ;
}
.focus{
    border:#0CF 2px solid;
}
.norm{
    border:#333 2px thin;   
}
.error{
    border:#F00 2px solid;  
}

</style>
<script type="text/javascript" >
function inputColor(input)
{
    input.className = "norm";
    input.onfocus = function()
    {
        this.className="focus";
    }
}
window.onload = function(){
    with(document.forms[0])
    {
        inputColor(user);
        inputColor(psw);
        inputColor(repsw);
        inputColor(mail);
    }
}

function check(inputNode,regex,divId)
{
    var b = false;
    var div = byId(divId);
    if(regex.test(inputNode.value))
    {
        inputNode.className = "norm";
        div.style.display = "none"; 
        b = true;
    }
    else
    {
        inputNode.className = "error";
        div.style.display = "block";        
    }
    return b;
}
//校验用户名
function checkUser(userNode)
{
    var regex = /^\w{3,5}$/;   
    return check(userNode,regex,"userdiv");
}

function checkMail(mailNode)
{
    var regex = /^\w+@\w+(\.\w+)+$/    ;
    return check(mailNode,regex,"maildiv");
}

function checkForm(formNode)
{
    with(formNode)
    {
        if(checkUser(user) && checkPsw(psw) && checkRepsw(repsw) && checkMail(mail))
            event.returnValue = true;
        else
            event.returnValue = false;
    }
    
    $(function () {
        $("#btnCode").click(function () {
            //执行获取验证码的操作
            GetNumber();
        });
    })

    var count = 5;
    function GetNumber() {
        $("#btnCode").attr("disabled", "disabled");
        $("#btnCode").val(count + "秒之后点击获取")
        count--;
        if (count > 0) {
            setTimeout(GetNumber, 1000);
        }
        else {
            $("#btnCode").val("点击获取验证码");
            $("#btnCode").attr("disabled", "");
        }
    }
    
  //检查手机号码是否已经注册
    function checkPhone(obj){
        phone = obj.value;
        if(phone==null || phone==""){
            $("#showResult").html("<font color='red'>请输入正确手机号码</font>"); 
            canLogin=false;
        }else{
            var myurl = "${ctx}/account/checkPhone";
            $.ajax({
                async:false,
                type:"POST",
                url:myurl,
                data:"phone="+phone,
                dataType:"json",
                complete:function(msg) {  
                    if (eval("(" + msg.responseText + ")")) {  
                        $("#showResult").html("");
                        $('.btn').css({background:'#ffb131',border:'#ffb131',color:'#fff'}); 
                        canLogin = true;
                    } else {  
                        $("#showResult").html("<font color='red'>该手机号尚未注册，请先注册</font>");
                        $('.btn').css({background:'#d9d9d9',border:'#d9d9d9',color:'#808080'}); 
                        canLogin = false;
                    }  
                }
            });
        }
    }
}
</script>
<body>  
<form onsubmit="checkForm(this)">
    <table align="center">
        <tr>
            <th>官网注册</th>
        </tr>
        <tr>
            <td>
                <div>用户名<input type="text" name="user" onblur="checkUser(this)" placeholder="提示：用户名必须是3-5位，由字母（a-z），数字（0-9），下划线（_）组成"/></div>
                <div id="userdiv" class="errorinfo">用户名错误，请按要求输入</div>
            </td>
        </tr>
        <tr>
        	<td>
        		 <div>密码&nbsp;&nbsp;&nbsp;<input type="text" name="pwd" onblur="checkPwd(this)" placeholder="提示:密码必须6位数"/></div>
        	</td>
        </tr>
        <tr>
            <td>
                <div>
                <span id="phone">手机号码</span>
                <input type="text" name="phone" onblur="checkPhone(obj)"placeholder="提示:手机号码必须是11位"/>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div>验证码&nbsp;<input type="text" name="mail" onblur="checkMail(this)"/>
                 <input id="btnCode" type="button" value="点击获取验证码"/>
                </div>
            </td>
        </tr>
        <tr>
            <th>
                <input type="submit" value="注     册"/>
            </th>
        </tr>
    </table>
</form>
</body>
</html> 